<template>
	<view class="wrapper bg-linear h-full">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误状态 -->
		<view v-else-if="error" class="error-container">
			<text class="error-text">加载失败，请重试</text>
			<button class="retry-btn" @click="loadData">重试</button>
		</view>

		<!-- 内容区域 - 始终显示 -->
		<view v-else>
			<view v-if="schools.length === 0" class="empty-container">
				<text class="empty-text">暂无驾校数据</text>
			</view>

			<view v-else class="school-list">
				<view class="school-item" v-for="school in schools" :key="school.id">
					<image class="school-img" :src="school.image || school.image_text"></image>
					<view class="school-info">
						<view class="school-title">{{ school.title }}</view>
						<view class="school-desc">{{ school.description }}</view>
					</view>
					<!-- 优化：纯文字按钮，移除按钮组件 -->
					<view class="detail-text" @click="toDetail(school)"
						:class="{ 'has-qrcode': school.qrcodes.length > 0 }">
						<text v-if="school.qrcodes.length > 0">查看详情</text>
						<text v-else>了解详情</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		getDrivingSchoolBySchoolId
	} from '@/package/api/selList.js';

	// 状态管理
	const schoolId = ref('');
	const schools = ref([]);
	const loading = ref(true);
	const error = ref(false);

	// 从本地存储获取school_id
	const getSchoolIdFromStorage = () => {
		try {
			const storedSchoolId = uni.getStorageSync('school_id');
			console.log(storedSchoolId)
			if (storedSchoolId) {
				schoolId.value = storedSchoolId;
				return true;
			}
			return false;
		} catch (e) {
			console.error('获取本地存储失败:', e);
			return false;
		}
	};

	// 加载数据
	const loadData = async () => {
		const data = {
			schoolId: uni.getStorageSync('school_id')
		};
		console.log(data)
		try {
			const res = await getDrivingSchoolBySchoolId(JSON.stringify(data));
			console.log(res)

			if (res.code === 200 && Array.isArray(res.data)) {
				schools.value = res.data.map(item => ({
					id: item.id,
					title: item.title,
					image: item.image,
					description: item.description,
					schoolId: item.schoolId,
					qrcodes: item.qrCode ? [{
						url: item.qrCode,
						desc: '驾校详情二维码'
					}] : []
				}));
			} else {
				throw new Error(res.message || '获取数据失败');
			}
		} catch (err) {
			console.error('请求失败:', err);
			error.value = true;
			schools.value = [];
		} finally {
			loading.value = false;
		}
	};

	// 模拟数据（适配详情页格式）
	const mockSchools = [{
		id: 1,
		title: 'ABC驾驶学校',
		image: 'https://picsum.photos/200/200?random=1',
		description: '金牌机构·4.9分·1500+学员',
		schoolId: 'school_001',
		qrcodes: [{
				url: 'https://picsum.photos/300/300?random=101',
				desc: '报名咨询'
			},
			{
				url: 'https://picsum.photos/300/300?random=102',
				desc: '缴费通道'
			}
		]
	}];

	// 跳转到详情页并存储数据
	const toDetail = (school) => {
		try {
			// 存储格式化后的驾校信息到本地
			uni.setStorageSync('selectedDrivingSchool', {
				title: school.title,
				desc: school.description,
				prices: [{
						name: 'VIP班',
						price: '2699'
					},
					{
						name: '贵宾班',
						price: '3999'
					}
				],
				qrcodes: school.qrcodes || []
			});
			// 跳转详情页
			uni.navigateTo({
				url: '/package/pages/drivingSchoolDeatil/drivingSchoolDeatil'
			});
		} catch (e) {
			console.error('本地存储失败:', e);
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		}
	};

	// 生命周期
	onLoad((options) => {
		if (options.cid) {
			schoolId.value = options.cid;
		}
		loadData();
	});

	onShow(() => {
		loadData();
	});
</script>

<style scoped>
	/* 样式保持不变，优化按钮样式 */
	.wrapper {
		padding: 20rpx;
	}

	.bg-linear {
		background: linear-gradient(to bottom, #f5f7fa, #e4e9f2);
	}

	.loading-container,
	.error-container,
	.empty-container {
		padding: 100rpx 0;
		text-align: center;
	}

	.loading-text,
	.error-text,
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.retry-btn {
		margin-top: 20rpx;
		padding: 10rpx 30rpx;
		background-color: #3c91ff;
		color: #fff;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.school-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.school-item {
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.school-img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}

	.school-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.school-title {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
	}

	.school-desc {
		font-size: 24rpx;
		color: #666;
	}

	/* 优化：纯文字按钮样式 */
	.detail-text {
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		padding: 10rpx 24rpx;
		color: #3c91ff;
		/* 蓝色文字 */
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.detail-text.has-qrcode {
		padding-right: 20rpx;
	}

	.detail-text::after {
		content: "→";
		/* 增加箭头符号 */
		margin-left: 8rpx;
		font-size: 20rpx;
	}
</style>